<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/theme/atom-one-dark.css">
        <title>练习1-ES6/7常用语法介绍</title>
    </head>

    <body>
        <pre>
            <code>
                // 练习1：请将下面的代码用ES6的写法进行改写

                // 接口:
                //   学生选修课选择情况表：https://www.easy-mock.com/mock/5af58399b758743d3788f8bb/courses_selection/
                //   选修课表：https://www.easy-mock.com/mock/5af58399b758743d3788f8bb/courses/
                'use strict';

                ;
                (function () {
                    const API = {
                        COURSES_SELECTION: 'https://www.easy-mock.com/mock/5af58399b758743d3788f8bb/courses_selection/',
                        COURSES: 'https://www.easy-mock.com/mock/5af58399b758743d3788f8bb/courses/'
                    };

                    class Person {
                        constructor(name, age) {
                            this.name = name
                            this.age = age
                        }

                        getName() {
                            return this.name
                        }

                        getAge() {
                            return this.age
                        }
                    }

                    class Student extends Person {
                        constructor(name, age, number, subject) {
                            super(name, age)
                            this.number = number
                            this.subject = subject
                        }

                        getNumber() {
                            return this.number
                        }

                        getSubject() {
                            return this.subject
                        }
                    }

                    class App {
                        request(url) {
                            return new Promise((resolve, reject) => {
                                $.ajax({
                                    url: url,
                                    type: 'GET',
                                    success(res) {
                                        resolve(res)
                                    },
                                    error(err) {
                                        reject(err)
                                    }
                                })
                            })
                        }

                        createTemplate(data) {
                            if (data instanceof Array) {
                                return `&lt;table&gt;
                                            &lt;thead&gt;
                                                &lt;tr&gt;
                                                    &lt;th&gt;学号&lt;/th&gt;
                                                    &lt;th&gt;姓名&lt;/th&gt;
                                                    &lt;th&gt;年龄&lt;/th&gt;
                                                    &lt;th&gt;所选课程&lt;/th&gt;
                                                &lt;/tr&gt;
                                            &lt;/thead&gt;
                                            &lt;tbody&gt;
                                                ${data.map(item => `
                                                    &lt;tr&gt;
                                                        &lt;td&gt;${item.number}&lt;/td&gt;
                                                        &lt;td&gt;${item.name}&lt;/td&gt;
                                                        &lt;td&gt;${item.age}&lt;/td&gt;
                                                        &lt;td&gt;${item.subject}&lt;/td&gt;
                                                    &lt;/tr&gt;
                                                `).join('')}
                                            &lt;/tbody&gt;
                                        &lt;/table&gt;
                                       `
                            } else {
                                return ''
                            }
                        }

                        async dataHandler() {
                            const coursesSelection = await this.request(API.COURSES_SELECTION)
                            const data1 = Object.assign([], coursesSelection.data)
                            const result = []
                            const courses = await this.request(API.COURSES)
                            data1.map(item1 => {
                                courses.data.map(item2 => {
                                    if (Object.is(item1.subjectId, item2.number)) {
                                        item1.subjectName = item2.name
                                    }
                                })
                                return item1
                            }).map(item1 => {
                                result.push(new Student(item1.name, item1.age, item1.number, item1.subjectName))
                            })

                            $('#result').html(this.createTemplate(result))
                        }

                        init() {
                            this.dataHandler()
                        }
                    }

                    new App().init()
                })();
            </code>
        </pre>
        <div id="result"></div>
        <script src="scripts/libs/highlight.pack.js"></script>
        <script src="scripts/libs/jquery-1.8.3.min.js"></script>
        <script src="scripts/p_1_1.js"></script>
        <script>
            hljs.initHighlightingOnLoad();
        </script>
    </body>

</html>